/**
 * @author zhangqiang
 * @data 2017/3/14
 *  地址列表
 * */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {Tabs, WhiteSpace } from 'antd-mobile'
import {getOrderList} from '../../actions/orderListActions'
import {
	OrderListMsg,
	NoData
} from  '../../components/orderList'
import 'style/orderList.scss'
import style from './index.scss'
import common from '../../utils/common'
const TabPane = Tabs.TabPane;

class OrderList extends Component {
	constructor(props) {
		super(props)
		this.state = {
			isShowList: 1
		}
		this.tabsCallback = this.tabsCallback.bind(this);
	}

	/**
	 * 生命周期
	 */
	componentWillMount() {

	}
	componentWillUnmount() {
		window.isShowVisa = true;
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentDidMount() {
		common.setViewTitle('我的订单');
		this.setOrderType(1)
	}

	setOrderType(type){
		//业务类型 1查询办理中，2/查询已完成 3 查询全部订单
		let getData={
			bizFlag: type
		}
		this.props.dispatch(getOrderList(getData,(res)=>{
			this.setState({
				isShowList: res.length>0?true:false
			})
		}))
	}

	tabsCallback(key) {
		console.log('onChange', key);
		this.setOrderType(key)
	}

	handleTabClick(key) {
		console.log('onTabClick', key);

	}

	render() {
		return (
			<div className={style.orderList} style={{paddingBottom: '1rem'}}>
					<Tabs defaultActiveKey="1"  animated={false} swipeable={false} onChange={(key) => this.tabsCallback(key)} onTabClick={this.handleTabClick()}>
						{/*<TabPane tab={navigation.groupName} key={navigation.groupId}>*/}
						{
							this.props.headTag.map((headTag,headTagIndex)=>
								<TabPane tab={headTag.name} key={headTag.key}>
									<WhiteSpace size="rem24" style={{ position: "relative", background: '#f1f1f1', zIndex: "1" ,height: '.24rem'}} /> {/*  上下间隔 */}
									{
										this.state.isShowList?
										this.props.orderList.map((orderList,orderListIndex)=>
											<OrderListMsg
												key={orderListIndex}
												orderList={orderList}
											/>
										):!this.props.orderList?<div></div>:<NoData key={headTag.key}/>
									}
								</TabPane>
							)
						}
					</Tabs>
					<WhiteSpace />

				<div className={style.footNav+' '+'border_top_1'}>
					<div className={style.visaNav} onClick={()=>{this.toUrl('home')}}>
						<span><img src="./images/visaNav_s.png" alt="港澳签注"/>港澳签注</span>
					</div>
					<div className={style.orderNav}>
						<span><img src="./images/orderNav_s.png" alt="我的订单"/>我的订单</span>
					</div>
				</div>

			</div>
		)
	}
}

//使用context
OrderList.contextTypes = {
	router: React.PropTypes.object.isRequired
};

OrderList.defaultProps = {
	data:[],
	index:['',''],
	headTag:[   //标签头部
		{
			name: '办理中',
			key: 1
		},{
			name: '已完成',
			key: 2
		},{
			name: '全部订单',
			key: 3
		}
	],
	orderList:[],
	list:[
		{type: '林炳新个人游港澳再签注',mony:95,orderNum:2210234745050,state:1,stateText:'预约申请中'},
		{type: '林炳新个人游港澳再签注',mony:95,orderNum:2210234745050,state:1,stateText:'预约申请中'},
		{type: '林炳新个人游港澳再签注',mony:95,orderNum:2210234745050,state:1,stateText:'预约申请中'}
	]
};

function mapStateToProps(state) {
	return Object.assign({}, state.orderList);
}

export default connect(mapStateToProps)(OrderList)